<!--
 * @Author: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @Date: 2023-10-15 20:41:25
 * @LastEditors: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @LastEditTime: 2023-10-20 18:40:27
 * @FilePath: \uni-preset-vue-vite-ts\src\pages\my\index.vue
 * @Description: 
 * qq1908552310
-->

<template>
  <view class="my_container">
    <div class="my_header">
      <div class="header_user" v-if="loginType.type == 'login'">
        <img class="userImg" src="../../static/PNG/1x/Icon/User 36.png" alt="" />
        <div class="tel">{{ loginType.username }}</div>
        <div class="tab_account"><span @click="loginTabUser">切换账号</span><img class="accountright"
            src="../../static//PNG//1x//Icon//Arrow Right 2.png" alt=""></div>
      </div>
      <div class="header_usertwo" @click="loginOfregistry" v-else>
        <img class="usesimage" src="../../static/PNG/1x/Icon/User 36.png" alt="" />
        <div class="tel">登录/注册</div>
      </div>
      <div class="header_title">
        <div class="title_list" @click="Topassenger"><img src="../../static/PNG/1x/Icon/联系人.png" alt=""
            class="leftImg"><span class="contentText">常用联系人</span><img class="rightIcon"
            src="../../static/PNG/1x/Icon/Arrow Right.png" alt="">
        </div>
        <div id="contentBoder" class="title_list"><img src="../../static/PNG/1x/Icon/订单.png" alt="" class="leftImg"><span
            class="contentText">我的订单</span><img class="rightIcon" src="../../static/PNG/1x/Icon/Arrow Right.png" alt="">
        </div>
        <div class="title_list"><img src="../../static/PNG/1x/Icon/个人中心 客服.png" alt="" class="leftImg"><span
            class="contentText">客服中心</span><img class="rightIcon" src="../../static/PNG/1x/Icon/Arrow Right.png" alt="">
        </div>
      </div>
    </div>
  </view>
</template>

<script setup lang="ts">

import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive } from "@vue/runtime-core";
import { onMounted } from "vue";
const loginType: any = reactive({
  type: uni.getStorageSync('type') || "",
  username: uni.getStorageSync('username') || ""
})
const loginOfregistry = () => {
  // 登录/注册
  uni.navigateTo({
    url: "/pages/login/index"
  })
}
const loginTabUser = () => {
  uni.navigateTo({
    url: "/pages/login/tabuser/index"
  })
}
onMounted(() => {
  console.log(loginType, "loginType")
})

// 跳转乘客列表
const Topassenger = () => {
  uni.navigateTo({
    url: "/pages/my/passenger/index"
  })
}
</script>

<style lang="scss" scoped>
.my_container {
  width: 100%;
  height: 100%;

  .my_header {
    width: 100%;
    height: 500rpx;
    background-color: rgba(27, 169, 186);
    position: relative;

    .header_user {
      width: 700rpx;
      height: 100rpx;
      position: absolute;
      left: 15px;
      top: 120px;
      display: flex;
      justify-content: space-between;

      .userImg {
        width: 56px;
        height: 100%;
      }

      .tel {
        line-height: 100rpx;
        width: 360rpx;
        color: #fff;
        font-weight: 800;
      }

      .tab_account {
        width: 98px;
        line-height: 100rpx;
        color: #fff;
        display: flex;
        align-items: center;

        .accountright {
          width: 30px;
          height: 30px;
        }
      }
    }

    .header_usertwo {
      width: 130rpx;
      height: 180rpx;
      position: absolute;
      left: 50%;
      margin-left: -50rpx;
      top: 180rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      color: #fff;

      .usesimage {
        width: 100rpx;
        height: 100rpx;
      }
    }



    .header_title {
      width: 720rpx;
      height: 400rpx;
      background-color: #fff;
      position: absolute;
      border-radius: 10px;
      top: 360rpx;
      left: 18rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      #contentBoder {
        border-top: solid 1px #d1d1d1;
        border-Bottom: solid 1px #d1d1d1;
      }

      .title_list {
        width: 90%;
        height: 33%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .leftImg {
          width: 56rpx;
          height: 60rpx;
        }

        .contentText {
          width: 460rpx;
        }

        .rightIcon {
          width: 56rpx;
          height: 60rpx;
        }
      }

      .title_list:active {
        background-color: #f4f4f4;
      }
    }
  }
}
</style>